<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员统计</title>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../../css/public.css" media="all" rel="stylesheet">
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/lay-module/echarts/echarts.js"></script>
    <link href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet">
    <script charset="utf-8" src="../../js/westeros.js"></script>
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <style type="text/css">
        body {
            background-color: rgba(192, 192, 192, 0.21);
        }
        #memberListdivOne {
            margin-left: 10px;
            margin-top: 50px;
            background-color: #FFFFFF;
            width: 48%;
            height: 500px;
            display: inline-block;
            border-radius: 10px;
            vertical-align:middle;

        }
        #memberListdivTew {
            vertical-align:middle;
            margin-left: 40px;
            margin-top: 50px;
            background-color: #FFFFFF;
            width: 48%;
            height: 500px;
            display: inline-block;
            border-radius: 10px;
        }
        .fa {
            font-size: 15px !important;
        }

        .fa:hover {
            font-size: 50px !important;
        }
    </style>
</head>
<body>
<div id="memberListdivOne">
    <input  type="text" class="layui-input" id="test1">
    <ul class="icons layui-row" style="position: relative;left: 40px">
    <li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-bar-chart-o" style="position: absolute;left: 30px;top: 15px"></i>
    </li>
        <span style="position: absolute;left: 60px;top: 12px">会员增长趋势图</span>
    </ul>
    <div id="dateMethon" style="width: 100%;height: 300px"></div>
</div>
<div id="memberListdivTew">
<ul class="icons layui-row">
    <li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1 '><i class="fa fa-female"></i></li>
    <span>会员性别分布图</span>
</ul>
</div>
</body>

<script type="text/javascript">
    var namesexs = []; //类别数组（用于存放饼图的类别）
    var browersex = [];
    var myChartsex1 = echarts.init(document.getElementById('memberListdivTew'), 'westeros');
    myChartsex1.showLoading();
    $.get("/getManCouns", function (result) {
        $.each(result.data, function (index, item) {
            // namesexs.push(item.sex); //挨个取出类别并填入类别数组
            browersex.push({
                name: item.sex,
                value: item.count
            });
        });
        myChartsex1.hideLoading();
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '数据',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: browersex
                }
            ]

        }
        myChartsex1.setOption(option);
    })
</script>
<script type="text/javascript">
    function getdate(date) {
        var mother=[];
        var motherdate=[];
        var myChart1 = echarts.init(document.getElementById('dateMethon'), 'westeros');
        $.get("/getmouthCounts",{"data":date}, function (result) {
            if (result.code==0){
                $.each(result.data, function (index, item) {
                    mother.push(item.month+"月");
                    motherdate.push(item.sum)
                });
                var option;
                option = {
                    xAxis: {
                        type: 'category',
                        data: mother
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: motherdate,
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                myChart1.setOption(option);
            }
        })
    }
    var values =2022;
    getdate(values);
    layui.use('laydate', function () {
        var laydate=layui.laydate
        //年选择器
        laydate.render({
            elem: '#test1'
            ,type: 'year'
            ,value: '2022'
            ,done: function(value){
                getdate(value);
            }
        });
    });
</script>
</html>